<template>
    <div>
        <el-dialog v-model="editVisible" width="50%" top="5%" :close-on-click-modal="false" @close="handleclose" title="查看">
            <el-form>
                <div class="display_column">
                    <el-form-item label="楼栋：">{{ devicedetail.building }}</el-form-item>
                    <el-form-item label="房间号：">{{ devicedetail.roomNum }}</el-form-item>
                </div>
                <div class="display_column">
                    <el-form-item label="宿舍类型：">{{
                        devicedetail.regionName
                    }}</el-form-item>
                    <el-form-item label="智慧主机号：">{{ devicedetail.imei }}</el-form-item>
                </div>
                <div class="display_column">
                    <el-form-item label="设备号：">{{ devicedetail.shunt }}</el-form-item>
                    <el-form-item label="设备名称：">{{ devicedetail.remark }}</el-form-item>
                </div>
                <div class="display_column">
                    <el-form-item label="设备属性：">{{ devicedetail.description }}</el-form-item>
                    <el-form-item label="设备运行状态："><span style="color: #66b1ff;" v-if="devicedetail.devState == 0">
                            合闸
                        </span><span style="color: red;" v-if="devicedetail.devState == 1">
                            分闸
                        </span>
                    </el-form-item>
                </div>
                <div class="display_column">
                    <el-form-item label="时控规则：">{{
                        devicedetail.ruleName
                    }}</el-form-item>
                    <el-form-item label="在线状态：">{{
                        devicedetail.isOnline == 0 ? "离线" : "在线"
                    }}</el-form-item>
                </div>
                <div class="display_column">
                    <el-form-item label="最新上传数据时间：">{{
                        devicedetail.syncTime
                    }}</el-form-item>
                    <el-form-item label="总用电量（KW.H）：">{{
                        devicedetail.totalElectricity
                    }}</el-form-item>
                </div>
                <div class="display_column">
                    <el-form-item label="分闸次数：">{{
                        devicedetail.openTimes
                    }}</el-form-item>
                    <el-form-item label="初次注册时间：">{{
                        devicedetail.createTime
                    }}</el-form-item>
                </div>
                <div class="display_column">
                    <el-form-item label="时控状态：">
                        {{ devicedetail.state == 0 ? "正常" : "禁用" }}
                    </el-form-item>
                </div>
            </el-form>
            <!-- <template #footer>
          <span class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleclick">确 定</el-button>
          </span>
        </template> -->
        </el-dialog>
    </div>
</template>
<script>
import { ref, reactive } from "vue";
import { dictionaries } from "../../assets/js/dictionaries";
export default {
    components: {},
    setup(props, context) {
        console.log(context);
        const devicedetail = reactive(context.attrs.devicedetail);
        const editVisible = ref(context.attrs.editVisible);
        const handleclick = () => {
            context.emit("handleclick", devicedetail, editVisible.value);
        };
        const handleclose = () => {
            context.emit("handleclose", editVisible.value);
        }
        return {
            devicedetail,
            editVisible,
            handleclick,
            handleclose,
        };
    },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/common.css";
@import "../../assets/css/device.less";

.el-input {
    width: 215px;
}

&:deep(.el-dialog) {
    background: #fff;
}

.display_column {
    padding-left: 50px;
    display: grid;
    grid-template-columns: 50% 50%;
    /* justify-content: space-between; */
}

// &:deep(.el-overlay){
//   z-index:999!important;
// }
</style>
  